<!-- pages/login/components/passoword.vue -->
<template>
	<uni-forms class="login-form" ref="form">
		<uni-forms-item name="mobile">
			<uni-easyinput :input-border="false" :clearable="false" placeholder="请输入手机号" placeholder-style="color: #C3C3C5" />
		</uni-forms-item>
		<uni-forms-item name="password">
			<uni-easyinput type="password" placeholder="请输入密码" :input-border="false" placeholder-style="color: #C3C3C5" />
		</uni-forms-item>
		<view class="agreement">
			<radio :checked="false" color="#16C2A3" />
			我已同意
			<text class="link">用户协议</text>
			及
			<text class="link">隐私协议</text>
		</view>

		<button class="uni-button">登 录</button>
		<navigator hover-class="none" class="uni-navigator" url=" ">忘记密码？</navigator>
	</uni-forms>
</template>

<script>
export default {
	options: {
		styleIsolation: 'shared'
	}
};
</script>

<script setup></script>
<style lang="scss">
// pages/login/components/styles.scss
.uni-forms-item {
	height: 80rpx;
	margin-bottom: 30rpx !important;
	border-bottom: 1rpx solid #ededed;
	box-sizing: border-box;
	position: relative;
}

.agreement {
	font-size: 26rpx;
	color: #3c3e42;
	display: flex;
	align-items: center;
	margin-top: 50rpx;
	margin-left: -10rpx;

	.link {
		color: #16c2a3;
	}

	:deep(.uni-radio-wrapper) {
		transform: scale(0.6);
	}

	/* #ifdef MP */
	radio {
		transform: scale(0.6);
	}
	/* #endif */

	:deep(.uni-radio-input) {
		margin-right: 0 !important;
	}
}

:deep(.uniui-eye-filled),
:deep(.uniui-eye-slash-filled) {
	color: #6f6f6f !important;
}

:deep(.uni-forms-item__content) {
	display: flex;
	align-items: center;
}

:deep(.uni-forms-item__error) {
	width: 100%;
	padding-top: 10rpx;
	padding-left: 10rpx;
	border-top: 2rpx solid #eb5757;
	color: #eb5757;
	font-size: 24rpx;
	transition: none;
}

.text-button {
	display: flex;
	justify-content: flex-end;
	width: 240rpx;
	padding-left: 10rpx;
	font-size: 28rpx;
	color: #16c2a3;
	border-left: 2rpx solid #eee;
}

.uni-button {
	margin-top: 50rpx;
	border-radius: 60rpx;
	background-color: #20c5b2;
	color: #fff;
	&[disabled] {
		background-color: #fafafa;
		color: #d9dbde;
	}
}

.uni-navigator {
	margin-top: 30rpx;
	text-align: center;
	color: #848484;
	font-size: 28rpx;
}
</style>
